{% load i18n %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Shawshank - {% block title %}{% endblock %}</title>
    {% block rss %}
    {% endblock %}
    {% block style %}
        <style type="text/css">
            body, ul, li, form, input { margin: 0; padding: 0; }
            body { font-family: Arial, sans-serif; font-size: {% if request.session.fontsize %}{{ request.session.fontsize }}{% else %}11{% endif %}pt; }
            ul { list-style: none; }
            a, a:visited { color: #1030cc;text-decoration:none; }
            a img { border: none; }
            #header { background-color: #ecf2fa; border-bottom: 1px solid #6797d3; margin-bottom: 5px; padding: 5px; }
            #header ul li { display: inline; margin-right: 5px; }
            #content { padding: 0px 5px 0px 5px; }
            .message, .error { font-weight: bold; margin-bottom: 5px; padding: 5px; }
            .message { background-color: #fdedc1; border: 1px solid #fad163; }
            .error { background-color: #feb8b8; border: 1px solid #be3333; }
            .profile { margin-top: 10px; }
            .profile a.service { margin-right: 5px; }
            .profile img.picture { float: left; margin-bottom: 10px; margin-right: 10px; }
            .profile .section { margin-top: 5px; }
            .entries { clear: both; margin-top: 10px; }
            .entries .icon { float: left; padding-right: 4px;}
            .entries .entry, .rooms .room, .lists .list { margin-bottom: 10px; }
            .summary { margin-bottom: 5px; line-height:21px; }
            .title { margin-bottom: 5px; margin-left: 19px; }
            .comments li, .cocomment li { margin-top: 5px; padding-left: 20px ;line-height:21px; }
            .comments .comment,.cocomment .comment { background: url('/static/images/comment-lighter.png') 2px 3px no-repeat; }
            .comments .yourcomment { color:#333;}
            .comments .permalink { font-style: italic; }
            .likes { background: url('/static/images/smile.png') 1px 1px no-repeat; margin-top: 5px; padding-left: 20px; }
            .likes, .comments, .cocomment { margin-left: 7px; }
            .media { margin-left: 19px; margin-top: 2px; }
            .media img { border: 1px solid #d0d0d0; margin-right: 2px; padding: 3px; }
            .meta { color: gray; margin-top: 2px; margin-left: 19px; }
            #footer a, #footer a:visited, .meta a, .meta a:visited { color: #7777cc; }
            .meta a.via, .meta a.permalink { color: gray; text-decoration: none; }
            .meta a.via:hover, .meta a.permalink:hover { text-decoration: underline; }
            .hidden { color: gray; font-style: italic; }
            #nav { margin-top: 5px; }
            #footer { color: gray; margin-top: 5px; padding: 5px; }
            table{text-align:left;}
            li.even {background:#f8f8f8;margin:0;padding:2px 0}
            li.odd {background:#fff;margin:0;padding:2px 0}
            .commentbody{height:21px;}
            #link, #imageurl{padding:2px 0;display:none;}
        </style>
        <!--#if expr="(${HTTP_USER_AGENT} = /iPhone/)"-->
            <meta name="viewport" content="width=320" />
        <!--#endif -->
        <!--#if expr="(${HTTP_USER_AGENT} = /iPod/)"-->
            <meta name="viewport" content="width=320" />
        <!--#endif -->
    {% endblock %}
    {% block estyle %}
        <style type="text/css">
            .reply, .cocomment{display:none;}
        </style>
    {% endblock %}
    <script src="/static/jquery-1.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".summary, ul.comments li.comment").hover(function() {
            $(this).children(".reply").show();
            }, function() {
            $(this).children(".reply").hide();
            });
        $("ul.comments li.comment .reply").click(function(){
            var eid = $(this).attr("eid");
            var commenttext = "#e-" + eid
            var tonick = $(commenttext).val() + $(this).children("img").attr("alt") +": ";
            $(this).parent().parent().next("ul.cocomment").slideDown("slow");
            $(commenttext).focus();
            $(commenttext).val(tonick);
            return false;
            });
        $(".summary .reply").click(function(){
            var eid = $(this).attr("eid");
            var commenttext = "#e-" + eid
            var tonick = $(commenttext).val() + $(this).children("img").attr("alt") +": ";
            $(this).parent().nextAll(".meta").children("ul.cocomment").slideDown("slow");
            $(commenttext).focus();
            $(commenttext).val(tonick);
            return false;
            });
        $(".cancel").click(function(){
            var cid = $(this).attr("cid");
            var commenttext = "#e-" + cid
            $(this).parent().parent().parent().slideUp("slow");
            $(commenttext).val('');
            return false;
            });
        $(".reset").click(function(){
            var cid = $(this).attr("cid");
            var commenttext = "#e-" + cid
            $(commenttext).val('');
            return false;
            });
        $(".addlink").click(function(){
            $("#link").slideToggle();
            return false;
            });
        $(".addimage").click(function(){
            $("#imageurl").slideToggle();
            return false;
            });

    });
    </script>
</head>
<body>
    <a name="top"></a>
    <div id="header">
        <ul>
            {% if request.session.nickname %}
                <li>
                    0
                    <a href="{% url home %}" accesskey="0">{% trans "Friends"%}</a>
                </li>
                <li>
                    1
                    <a href="{% url rooms %}" accesskey="1">{% trans "Groups"%}</a>
                </li>
                <li>
                    2
                    <a href="{% url lists %}" accesskey="2">{% trans "Lists"%}</a>
                </li>
                <li>
                    3
                    <a href="{% url user request.session.nickname %}" accesskey="3">{% trans "Me"%}</a>
                </li>
            {% else %}
                <li>
                    0
                    <a href="{% url login %}" accesskey="0">{% trans "Login"%}</a>
                </li>
            {% endif %}
            <li>
                4
                <a href="{% url public %}" accesskey="4">{% trans "Everyone"%}</a>
            </li>
            <li>
                5
                <a href="{% url search %}" accesskey="5">{% trans "Search"%}</a>
            </li>

            <li>
                <a href="">{% trans "Refresh"%}</a>
            </li>
        </ul>
    </div>
    <div id="content">
        {% block above_content %}
        {% endblock %}
        {% block content %}
        {% endblock %}
        {% block below_content %}
        {% endblock %}
    </div>
    <div id="footer">
        {% block footer %}
            &copy;{% now "Y" %}
            -
            <a href="https://twitter.com/haitai">{% trans "Contact"%}</a>
            -
            <a href="{% url legal %}">{% trans "Legal"%}</a>
            -
            <a href="{% url settings %}">{% trans "Settings"%}</a>
            -
            {% ifequal request.session.django_language 'zh_CN' %}
            <a href="{% url setlanguage %}?lang=en">English</a>
            {% else %}
            <a href="{% url setlanguage %}?lang=zh_CN">中文</a>
            {% endifequal %}

            {% if request.session.nickname %}
            -
            <a href="{% url logout %}">{% trans "Logout"%}</a>
            {% endif %}
        {% endblock %}
    </div>
</body>
</html>